<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/shopping.css"/>
		
	</head>
	<body>
		<div id = "Home">
			<div id = "home" class="clearfix">
				<ul class = "return">
					<li class = "ret"><a href = "">返回首页</a></li>
					<li class = "fav"><a href = "">收藏本站</a></li>
					<li class = "send">送货至<select><option>北京市</option></select>
						
					</li>
				</ul>
				
				<ul class = "hi">
					<li>Hi,欢迎来到果乐汇</li>
					<li><a href = "">登录</a></li>
					<li><a href = "">注册</a></li>
					<li><a href = "">全国宅配</a></li>
					<li><a href = "">APP客户端<a></li>
					<li class = "weixin"><a href = "">关注微信</a></li>
					<li class = "member"><a href = "">会员中心</a></li>
					<li class = "pho"><span>400-161-1788</span></li>
				</ul>
			</div>
		</div>
		
		
		
		<!--(三)log部分-->
		<div id = "log">
			<div class = "inp">
				<a href = "index.html"><img src = "../img/index/b8da07ea38f450226f50c96fdc165df81dbd14d7.jpg"></a>
			</div>
			<div class="search">
				<input class = "s1" type = "text" value = "始终坚持优质水果-果乐汇" />
				<input class = "s2" type = "button" value = "搜索"  />
				<ul>
					<li><a href = "">美国樱桃</a></li>
					<li><a href = "">中秋礼卡礼券</a></li>
					<li><a href = "">中秋购物卡</a></li>
					<li><a href = "">越南红心火龙果</a></li>
			</ul>
			</div>
			
			<div class = "shopping">
				<a href = "">购物车</a>
			</div>
		</div>
		
		<!--(四)nav-->
		   <div id = "Nav">
		   		<div id = "nav">
		   			<p><a href = ""><img src = "../img/index/qb.png" />全部商品分类</a></p>
		   			<ul>	
			   			<li><a href = "">首页</a></li>
			   			<li><a href = "">会员中心</a></li>
			   			<li><a href = "">品牌发展</a></li>
			   			<li><a href = "">企业采购</a></li>
			   			<li><a href = "">礼品卡</a></li>
			   			<li><a href = "">通用提货券</a></li>
			   		</ul>
		   		</div>
		   </div>
		   
		   
		<!--(五)购物车-->
		<div id = "Shop">
			<div id="shop">
				<div class="che">
					<p><img src="../img/details/shopping2.jpg"/></>
						<ul class="clearfix">
							<li><div>1</div><p>购物车</p></li>
							<li><img src="../img/details/j.jpg"</li>
							<li><a href=""><div>2</div><p>填写和提交订单信息</p></a></li>
							<li><img src="../img/details/j.jpg"</li>
							<li><div>3</div><p>成功提交订单</p></li>
						</ul>
					
				</div>
				<div class="cartList">
			<ul class="cartHead">
				<li>缩略图</li>
				<li>品名</li>
				<li>单价</li>
				<li>数量</li>
				<li>小计</li>
				<li>操作</li>
			</ul>
			<div class="blank">
				您的购物车空空如也~~
			</div>
			</div>
			</div>
		</div>
		<script>
				$(function() {
				//取出在cookie中存的购物车信息
				var cartStr = $.cookie("cart") ? $.cookie("cart") : "";
				if(!cartStr) {
					$(".blank").css({
						display: "block"
					});
				} else {
					var cartObj = convertCartStrToObj(cartStr);
					//遍历所有的商品生成html添加到购物车列表中去
					for(var id in cartObj) {
						//商品信息对象
						var good = cartObj[id];
						var str = '<ul class="goodInfo" data-good-id="' + id + '">' +
							'<li><img src="' + good.src + '" /></li>' +
							'<li>' + good.name + '</li>' +
							'<li>' + good.price + '</li>' +
							'<li class="num">' +
							'<a href="javascript:;" class="minus">-</a>' +
							' <input type="text" value="' + good.num + '" />  ' +
							'<a href="javascript:;" class="plus">+</a>' +
							'</li>' +
							'<li class="total">' + good.num * good.price + '</li>' +
							'<li><a href="javascript:;" class="del">删除</a></li>' +
							'</ul>';
						//将上面的结构添加到cartList中去
						$(str).appendTo(".cartList");
					}
					//给每个商品添加从购物车删除的事件
					$('.goodInfo a.del').click(function() {
						//在页面上将商品信息删除，顺便获取一个该商品的id
						var id = $(this).parents('.goodInfo').remove().attr("data-good-id");
						//从cookie中将该商品删除
						var cartStr = $.cookie("cart") ? $.cookie("cart") : "";
						var cartObj = convertCartStrToObj(cartStr);

						delete cartObj[id];
						//将新商品信息放回cookie
						$.cookie('cart', convertObjToCartStr(cartObj), {
							expires: 7,
							path: "/"
						});
					})
					//给增加按钮添加事件
					$(".goodInfo a.plus").click(function() {

						var id = $(this).parents('.goodInfo').attr("data-good-id");

						var cartStr = $.cookie("cart") ? $.cookie("cart") : "";
						var cartObj = convertCartStrToObj(cartStr);
						cartObj[id].num += 1;
						//将页面上显示的数量加1
						$(this).siblings("input").val("" + cartObj[id].num);
						//更新页面上的小计
						$(this).parent().siblings('.total').html(cartObj[id].num * cartObj[id].price + "");
						//将信息放回cookie
						$.cookie('cart', convertObjToCartStr(cartObj), {
							expires: 7,
							path: "/"
						});
					});
					//给减按钮添加点击事件
					$(".goodInfo a.minus").click(function(){
						var id = $(this).parents('.goodInfo').attr("data-good-id");
						var cartStr = $.cookie("cart") ? $.cookie("cart") : "";
						var cartObj = convertCartStrToObj(cartStr);
						if(cartObj[id].num > 1){ //商品数量减少不能少于1
							cartObj[id].num -= 1;
							//将页面上显示的数量减1
							$(this).siblings("input").val("" + cartObj[id].num);
							//更新页面上的小计
							$(this).parent().siblings('.total').html(cartObj[id].num * cartObj[id].price + "");
							//将信息放回cookie
							$.cookie('cart', convertObjToCartStr(cartObj), {
								expires: 7,
								path: "/"
							});
						}
						
						
					});
					//改数量的input绑定一个blur事件
					$(".goodInfo li.num input").blur(function(){
						var id = $(this).parents('.goodInfo').attr("data-good-id");
						var cartStr = $.cookie("cart") ? $.cookie("cart") : "";
						var cartObj = convertCartStrToObj(cartStr);
						//判断用户输入是否合法
						var pattern = /^\d+$/;
						if(!pattern.test($(this).val())){
							cartObj[id].num = 1;
							$(this).val("1");
						}else{
							//修改一下数量
						cartObj[id].num = parseInt($(this).val());
						}
						
						
							$(this).siblings("input").val("" + cartObj[id].num);
							//更新页面上的小计
							$(this).parent().siblings('.total').html(cartObj[id].num * cartObj[id].price + "");
							//将信息放回cookie
							$.cookie('cart', convertObjToCartStr(cartObj), {
								expires: 7,
								path: "/"
							});
					})
					
			}

			});
			function convertCartStrToObj(cartStr) {
				//"sp1,香蕉,30,1,src1:sp2,苹果,40,2,src2:sp3,梨,50,3,str3"
				//如果是空字符串，即没有购物车信息，那么购物车为空，直接返回一个空对象
				if(!cartStr) {
					return {};
				}
				var goods = cartStr.split(":");
				var obj = {};
				for(var i = 0; i < goods.length; i++) {
					var data = goods[i].split(",");
					//以商品的id为健，商品的其他信息为值，这个值也设计为一个对象
					obj[data[0]] = {
						name: data[1],
						price: parseFloat(data[2]),
						num: parseInt(data[3]),
						src: data[4]
					}
				}
				return obj;
			}
			function convertObjToCartStr(obj) {
				var cartStr = "";
				for(var id in obj) {
					if(cartStr) {
						cartStr += ":";
					}
					cartStr += id + "," + obj[id].name + "," + obj[id].price + "," + obj[id].num + "," + obj[id].src;
				}
				return cartStr;
			}
			</script>
	</body>
</html>
